<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>陌生人饭局2.0报名</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link type="favicon" rel="shortcut icon" href="./img/iPhoneX.ico" />
    <link rel="stylesheet" type="text/css" media="screen" href="./css/weui.min.css" />
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>  
    <script src='./js/jquery-weui.min.js' type="text/javascript"></script>
    <style>
        h3{
            text-align: center;
            padding-top:15%;
            padding-bottom: 5%;
        }
        .change_radio{
            margin-top:0;
        }
        .btn{
            margin-top: 26%;
            width: 90%;
            margin-left: 5%;            
        }
    </style>
</head>
<body>

    <div class=''>
        <h3><span>陌生人饭局 2.0</span></h3>
        <div class="weui-cells weui-cells_form">
            <!-- 姓名 -->
            <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">姓名</label></div>
                <div class="weui-cell__bd">
                    <input class="weui-input" type="text"   id='name' placeholder="请输入你的姓名">
                </div>
            </div>
            <!-- 性别 -->
            <div class="weui-cells weui-cells_radio change_radio">
                    <label class="weui-cell weui-check__label" for="x11">
                            <div class="weui-cell__bd">
                                <p>帅哥</p>
                            </div>
                            <div class="weui-cell__ft">
                                <input type="radio" class="weui-check" name="sex" id="x11" value="man">
                                <span class="weui-icon-checked"></span>
                            </div>
                        </label>
                    <label class="weui-cell weui-check__label" for="x12">
                    
                            <div class="weui-cell__bd">
                                <p>美女</p>
                            </div>
                            <div class="weui-cell__ft">
                                <input type="radio" name="sex" class="weui-check" id="x12" checked="checked" value="woman">
                                <span class="weui-icon-checked"></span>
                            </div>
                    </label>
            </div>
            <!-- 年龄 -->
            <div class="weui-cell ">
                    <div class="weui-cell__hd">
                        <label class="weui-label">年龄</label>
                    </div>
                    <div class="weui-cell__bd">
                        <input class="weui-input" type="number" id='age' placeholder="请输入你的年龄">
                    </div>
            </div>
            <!-- 手机号 -->
            <div class="weui-cell ">
                <div class="weui-cell__hd">
                    <label class="weui-label">手机号</label>
                </div>
                <div class="weui-cell__bd">
                    <input class="weui-input" type="number" id='tel' placeholder="请输入手机号">
                </div>
            </div>
            <!-- 按钮 -->
            <div class='btn'>
                <a onclick="postTheData()" class="weui-btn weui-btn_primary" >提交</a>
                <a onclick="clearTheData()" class="weui-btn weui-btn_warn" >重置</a>    
            </div>
           

            <!-- form结束div -->   
        </div>
        

        <!-- 结束div -->
    </div>
    <script>
        //  清空函数
        function clearTheData(){
            $('input').val('');           
        }
        // 传递信息
        function postTheData(){
            var name = $('#name').val();
            var age = $('#age').val();
            var phone = $('#tel').val();
            var sex = $('input[name="sex"]:checked').val();
            console.log('sex'+sex)
            // json
            var json_ = {
                'name':name,
                'age':age,
                'phone':phone,
                'sex':sex
            }
            json_ = JSON.stringify(json_);
            
            console.log('json_:'+json_);
            console.log('json_'+json_.age);
           
            // console.log("数据: \n" + data + "\n状态: " + status);
            if(phone!=''&&name!=''&&age!=''&&sex!=''&&phone.length===11){
                $.ajax({
                    type: "post",
                    contentType: "application/json",
                    url: 'http://localhost:3553/saveData',
                    dataType: "json",
                    data:json_,
                    success: function (result) {
                    console.log("操作成功");
                    },
                    error:function(response){
                    console.log("error");
                    }
                });
                console.log('成功')
                    var putOut = "你的识别编号是你的手机号码:\n"+phone;
                    $.alert(putOut, function() {
                         //点击确认后的回调函数
                         $('.weui-mask').css('display','none');
                         $('.weui-dialog').css('display','none')
                    });
                    $('input').val('');
            }else{
                $.alert('请填写完整正确的信息', function() {
                         //点击确认后的回调函数
                         $('.weui-mask').css('display','none');
                         $('.weui-dialog').css('display','none')
                });
            }
                   

        }
    </script>
</body>
</html>